<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" title="提交订单" @clickLeft="back"  :fixed="true" statusBar="true"/>

	<!-- 	<uni-nav-bar :fixed="true" statusBar="true">
		    <view >标题栏</view>
		    <view slot="left">12</view>
		</uni-nav-bar> -->
		
		<!-- 提交订单 -->
		<view>
			<uni-card :title="orderInfo.nickname" :extra="'￥'+(orderInfo.orderAmount).toFixed(2)" :margin="'5upx'">
				<block v-for="(product, index) in orderInfo.orderDetailList" :key="index">
					<view style="display: flex;justify-content: flex-start;margin-top: 23upx;">
						<!-- 照片 -->
						<view style="width: 160upx;height: 160upx;">
							<image :src="product.productIcon" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
						</view>
						
						<!-- 商品信息 -->
						<view style="width: 100%;margin-left: 30upx;margin-right: 10upx;">
							<!-- 商品名称 -->
							<view style="display: flex;justify-content: space-between;">
								<view>
									<text>{{product.productName}}</text>
								</view>
								<view>
									<text>￥{{(product.productPrice*product.productQuantity).toFixed(2)}}</text>
								</view>
							</view>
							<!-- 商品数量 -->
							<view style="margin-top: 60upx;"> 
								<text>x{{product.productQuantity}}</text>
							</view>
						</view>
					</view>
				</block>
			
			</uni-card>
		</view>
		<view>
			<uni-card title="联系人信息" :margin="'5upx'">
				<view style="margin-top: 10upx;">
					<view>买家名字</view>
					<view>
						<uni-easyinput v-model="orderInfo.buyerName" placeholder="请输入买家名字"></uni-easyinput>
					</view>
				</view>
				
				<view style="margin-top: 10upx;">
					<view>买家电话</view>
					<view>
						<uni-easyinput v-model="orderInfo.buyerMobile" placeholder="请输入买家电话"></uni-easyinput>
					</view>
				</view>

				<view style="margin-top: 10upx;">
					<view>买家地址</view>
					<view>
						<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
				    </view> 
					<!-- <view>
					    <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
							@change="onchange" @nodeclick="onnodeclick">
					    </uni-data-picker>
					</view> -->
				</view>
			
				<uni-collapse>
					<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
					<uni-collapse-item title-border="none" :border="true">
						<template v-slot:title>
							<uni-list>
								<uni-list-item title="支付模式选择" :show-extra-icon="true" :extra-icon="extraIcon">
								</uni-list-item>
							</uni-list>
						</template>
						<view class="content">
							<button style="margin-top: 10upx;" @click="gotoOrder()">立即支付</button>
							<button style="margin-top: 10upx;"  @click="gotoMockOrder()">开启模拟支付</button>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10upx;font-weight: bolder;">
					<view>
						订单总金额
					</view>
					<view>￥{{(orderInfo.orderAmount).toFixed(2)}}</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {cancelRedisOrderUrl, muckpayurl, detailsInfo} from '../../api/request.js'; // 请求路径
	
	
	export default {
		data() {
			return {
				
				orderInfo: {
					orderId: "ac1d7d68d557204332932593d97c24cc", 
					sellerId: "111111", 
					buyerName: '', 
					buyerMobile: '', 
					buyerAddress: '',
					buyerOpenid: "1231",
					createTime: "2022-03-07 13:58:55",
					orderAmount: 0.00,
					orderDetailList: [],
					orderStatus: 0,
					payStatus: 0,
					payType: 0,
					remark: '',
				},
				
				
				
				// mobile: '',// 买家电话
				// buyerName: '', //买家名字
				// addressValue: '', //地址
				// classes: '',
				orderId: '',
				ordertaila: [
					{
					  "productId": "12543136",
					  "productQuantity": 100,
					  "productStatus": 0,
					  "updateTime": 1646220482000,
					  "productCount": 0,
					  "productName": "爆炒腊肠",
					  "createTime": 1645150538000,
					  "productIcon": "http://localhost:8009/images/seller/822df53f-bf7e-4634-820c-9870c54e8098.jpg",
					  "productPrice": 12.4,
					  "productDescription": "goods",
					  "categoryId": 1
					},
					{
					  "productId": "1354231001",
					  "productQuantity": 100,
					  "productStatus": 0,
					  "updateTime": 1646219671000,
					  "productCount": 0,
					  "productName": "爆炒腊肠",
					  "createTime": 1646205214000,
					  "productIcon": "http://localhost:8009/images/seller/910f6216-6861-40a6-9d2a-5bac392c5d36.jpg",
					  "productPrice": 22.1,
					  "productDescription": "好吃到爆",
					  "categoryId": 1
					}
				],
				count: 1,
				items: [{
					text: "长沙",
					value: "10",
					children: [
				    {
				        text: "芙蓉区",
				        value: "11"
				    },
				    {
				        text: "五一广场",
				        value: "12"
				    }]
				},
				{
					text: "星沙",
				    value: "20"
				},
				{
				    text: "暗杀",
				    value: "30"
				}]
				
				
			 }
		},
		
		onLoad(option) {
			console.log("接收到的参数 订单编号："+option.orderId)
			// 查询数据库，进行数据的渲染。查询订单详情,
			let openId = '1231';
			console.log("1");
			this.orderId = option.orderId;
			// Promise.all([this.initData(openId, option.orderId)])
			// 	.then(res=> {
			// 		console.log(res);
			// 	});
			
			
				
				// Promise.all([
				//         this.getData(1),
				//         this.getData1(2)
				//     ]).then((results)=>{
				//         var data1=results[0];
				//         var data2=results[1];
				//     })

					
				
			console.log("3")
		},
		
		mounted() {
			this.initData('1231', this.orderId);
		},
		
		methods: {
			initData(openId, orderId) {
				getPost(detailsInfo+`openId=${openId}&orderId=${orderId}`)
					.then((res)=> {
						console.log("2")
						console.log("订单详情");
						console.log(res.data.data.orderDTO);
						this.orderInfo = res.data.data.orderDTO;
					})
			},
			
			onchange(e) {
				const value = e.detail.value
				console.log(value);
				this.orderInfo.buyerAddress = "10,11";
				// 遍历这个数组便可以得到下标，将其用逗号拼接返回到数据库中
			},
			onnodeclick(node) {
				// node 当前点击节点
			
				// this.classes = e.value;
				// let selected = this.$refs["class"].selected;
				// console.log("当前选中的值=>" , selected);
				 
			},
			onstepsearch(node, resolve) {
				if (node.level === 0) {
					return resolve([{
						text: 'region1',
						value: 'region1'
					}, {
						text: 'region2',
						value: 'region1'
					}]);
				}

				var hasChild;
				if (node.text === 'region1') {
					hasChild = true;
				} else if (node.text === 'region2') {
					hasChild = false;
				} else {
					hasChild = Math.random() > 0.5;
				}

				setTimeout(() => {
					var data;
					if (hasChild) {
						data = [{
							text: 'zone' + this.count++,
							value: 'zone' + this.count++
						}, {
							text: 'zone' + this.count++,
							value: 'zone' + this.count++
						}];
					} else {
						data = [];
					}

					resolve(data);
				}, 500);
			},
			onpopupopened() {},
			onpopupclosed() {},
			
			gotoOrder() {
				console.log("前往真实支付");
				if(!this.verifyData()) { // 验证表单中是否有数据
					return ;
				}
				
				// 真实支付
			},
			
			gotoMockOrder() {
				if(!this.verifyData()) { // 验证表单中是否有数据
					return ;
				}
				console.log("前往模拟支付，立即跳转到订单表");
				
				// 直接支付完成。。
				let orderMasterForm =  {
					"buyerAddress": "",
					"buyerMobile": "",
					"buyerName": "",
					"orderId": "",
					"payType": 1,
					"remark": ""
				}
				
				getPost(muckpayurl, this.orderInfo)
					.then((res)=>{
						uni.switchTab({
							url: '/pages/order/order',
							// animationType: 'pop-in',
							// animationDuration: 200
						});
					})
					.catch((err)=> {
						
					})
				

			},
			
			
			// 点击了回退按钮
			back() {
				console.log("点击了回退了"+this.orderId);
			
				getPost(cancelRedisOrderUrl+this.orderId)
					.then((res)=> {
						console.log("请求成功，回退上一页，购物车页");
						uni.navigateBack();
					})
					.catch((err)=> {
						
					})
				
			},
			
			// 验证数据买家名字，买家电话，买家地址
			// buyerName: null,
			// buyerMobile: null, 
			// buyerAddress: null,
			verifyData() {
				let title = '';
				if( 
						this.orderInfo.buyerName.length ==0 || 
						this.orderInfo.buyerMobile.length == 0 || 
						this.orderInfo.buyerAddress.length == 0) {
					if(this.orderInfo.buyerName.length ==0) {
						title = "请输入买家名字";
					} else if(this.orderInfo.buyerMobile.length == 0){
						title = "请输入买家电话";
					} else{
						title = "请输入买家地址";
					}
					uni.showToast({
						title,
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				
				return true;
			}
		}
	}
</script>

<style>

</style>
